<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="Doc.css" rel="stylesheet"/>
<title>TreeGrid - Editable cells images</title>
</head>
<body>
<div class="Doc">

<h1>Editable cell images</h1>
<p class="H1">TreeGrid documentation</p>

<!-----------------------------------------------------------------------  Insert images  ------------------------------------------------->
<a name="Image"></a> <a name="InsertImage"></a>
<h2>Insert image</h2>
<i>Since 15.0</i> the image files can be inserted directly to the cell values in types <b>EHtml</b>, <b>Auto</b>, <b>Img</b> and <b>Icon</b> and also to grid as <i><b>floating</b></i> image in <a href="#CellImg">Img</a> attribute.<br />
<strong>Not available in Internet Explorer <b>9</b> and older!</strong><br />

<!-- InsertImg -->
<a name="CfgInsertImg"></a>
<div class="XML">
   <u style="margin-right:-60px">new <b>15.0</b></u> <b style="margin-right:60px;">&lt;Cfg> &lt;C> &lt;I> &lt;cell></b> <i>string[]</i>
   <h4>InsertImg</h4> <s>["drop,open,text,float,more"]</s>
</div>
If and how can be images inserted to grid in <a href="#CellImg">Img</a> attribute and into text in types <b>EHtml</b>, <b>Auto</b>, <b>Img</b> and <b>Icon</b>.<br />
The images are inserted into the cells as data urls and can be uploaded to server.<br />
Comma separated list of flags:<br />
<b>drop</b> - If set, images can be dropped to the cell.<br />
<b>open</b> - If set, images can be placed to the cell by choosing the image(s) from file dialog.<br />
<b>text</b> - If set, images can be inserted into <i><b>text</b></i> in edited cell, into cursor position, the image will be a part of the text. Only for EHtml and Auto types.<br />
<b>add</b> - If set, images can be inserted into <i><b>text</b></i> in not edited cell, to the end of the text, the image will be a part of the text. Only for EHtml and Auto types.<br />
<b>replace</b> - If set, images can be inserted into <i><b>text</b></i> in not edited cell, the image replaces the current content, the image will be a part of the text.<br />
<b>float</b> - If set, images can be inserted to cell, the image will be inserted into <a href="#CellImg">Img</a> attribute and will be <i><b>floating</b></i> behind text.<br />
<b>readonly</b> - If set, the <b>add</b> and <b>replace</b> flags are applicable also for not editable cells.<br />
<b>more</b> - If set, more images can be chosen in the file dialog and inserted to the cell. Only for EHtml and Auto types.<br />
<b>rowspan</b> - If set, the cell is spanned vertically to other rows to show the <i><b>text</b></i> image without changing the row height.<br />
<b>colspan</b> - If set, the cell is spanned horizontally to other columns to show the <i><b>text</b></i> image fully.<br />

<!-- InsertImgMaxWidth -->
<a name="CfgInsertImgMaxWidth"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;Cfg></b> <i>int</i>
   <h4>InsertImgMaxWidth</h4> <s>[300]</s>
</div>
Maximal width of the inserted image in pixels. The image can be more resized when editing.

<!-- InsertImgMaxHeight -->
<a name="CfgInsertImgMaxHeight"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;Cfg></b> <i>int</i>
   <h4>InsertImgMaxHeight</h4> <s>[200]</s>
</div>
Maximal height of the inserted image in pixels. The image can be more resized when editing.

<!-- OnOpenImage -->
<a name="OnOpenImage"></a>
<div class="API">
   <u>new <b>15.0</b></u> <b>API event</b> <i>bool</i>
   <h4>OnOpenImage</h4> <s>(<i>TGrid</i> <b>grid</b>, <i>TRow</i> <b>row</b>, <i>string</i> <b>col</b>, <i>img[]</i> <b>images</b>, <i>bool</i> <b>drop</b>, <i>int</i> <b>action</b>)</s>
</div>
Called after image(s) is opened or dropped to cell, but before the cell value is modified.<br />
<b>images</b> is array of DOM IMG elements to be added to the cell value. If the cell is type Img or Icon, only the first image will be added to the cell.<br />
The IMG elements are added to the <b>EHtml</b> and <b>Auto</b> type cell as <b>outerHTML</b>, to the <b>Img</b> and <b>Icon</b> cell types only as <b>src</b> attribute value.<br />
<b>drop</b> is set, if the image was dropped to cell. It is not set, if the image was opened by system file dialog.<br />
<b>action</b> is planned action, <b>1</b> - add <i><b>floating</b></i> image(s) to <a href="#CellImg">Img</a> attribute, <b>2</b> add image(s) to the cell value, <b>3</b> set (replace) image(s) to the cell value.<br />
Return new <b>action</b> or 0 to cancel the action.<br />

<!-- OnOpenImageCell -->
<a name="OnOpenImageCell"></a>
<div class="API">
   <u>new <b>16.1</b></u> <b>API event</b> <i>type</i>
   <h4>OnOpenImageCell</h4> <s>(<i>TGrid</i> <b>grid</b>, <i>TRow</i> <b>row</b>, <i>string</i> <b>col</b>, <i>bool</i> <b>test</b>)</s>
</div>
Called before dialog for inserting image is displayed for given cell. It is <u>not</u> called on drop file, for this case use <a href="#OnDropFile">OnDropFile</a> instead.<br />
<b>test</b> is set if only testing possibility to insert image in the cell.<br />
Return true to cancel the opening.<br />
Or return array as [row,col,insertimg] to insert the image to another cell. 
If set <b>insertimg</b>, it is used instead of <a href="#CfgInsertImg">InsertImg</a> when testing opening permissions.<br />

<!-- OpenImage -->
<a name="ActionsOpenImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>OpenImage <i>...<a href="Events.htm#Suffix">FSAO</a></i></h4> <s>Assigned to event <b>OnClickButtonAddImg</b></s>
</div>
Displays system dialog to open local image file and insert it to the actual or focused cell of type <b>EHtml</b>, <b>Auto</b>, <b>Img</b> and <b>Icon</b> or as floating image into <a href="#CellImg">Img</a> attribute.<br />
The way of inserting is chosen by <a href="#CfgInsertImg">InsertImg</a>.<br />
The images are inserted into the cells or to <a href="#CellImg">Img</a> attribute as data urls and can be uploaded to server.<br />

<!-- DropFiles -->
<a name="CfgDropFiles"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;Cfg></b> <i>bool</i>
   <h4>DropFiles</h4> <s>[1]</s>
</div>
If files can be dropped to the grid.<br />
If set, dropping of any unsupported file to the grid will cancel default browser action for this file drop.<br />
It must be set to permit dropping xlsx files for import, image files to EHtml, Auto, Img and Icon types and to Img attribute and other files to File type.<br />

<!-- OnDropFile -->
<a name="OnDropFile"></a>
<div class="API">
   <u>new <b>15.0</b> <i>upd <b>16.1</b></i></u> <b>API event</b> <i>type</i>
   <h4>OnDropFile</h4> <s>(<i>TGrid</i> <b>grid</b>, <i>TRow</i> <b>row</b>, <i>string</i> <b>col</b>, <i>file[]</i> <b>files</b>)</s>
</div>
Called when a user dropped any file to grid, to given cell. The <b>row</b> and <b>col</b> can be also null.<br />
<b>files</b> is list of the dropped files as dataTransfer.files.<br />
Return true to cancel the drop.<br />
<i>Since 16.1</i> return array as [row,col,insertimg] to drop the file to another cell. 
If set <b>insertimg</b>, it is used instead of <a href="#CfgInsertImg">InsertImg</a> when testing dropping permissions.<br />

<!-- OnDropFileError -->
<a name="OnDropFileError"></a>
<div class="API">
   <u>new <b>15.0</b></u> <b>API event</b> <i>void</i>
   <h4>OnDropFileError</h4> <s>(<i>TGrid</i> <b>grid</b>, <i>TRow</i> <b>row</b>, <i>string</i> <b>col</b>, <i>file[]</i> <b>files</b>)</s>
</div>
Called when a user dropped any file to grid, to given cell and the file was not processed by TreeGrid.<br />
<b>files</b> is list of the dropped files as dataTransfer.files.<br />

<!-----------------------------------------------------------------------  Edit images  ------------------------------------------------->
<a name="EditImage"></a>
<h2>Edit image</h2>
<i>Since 15.0</i> the image files can be edited inside cell in types <b>EHtml</b> and <b>Auto</b> and as floating images set by <a href="#CellImg">Img</a> attribute.<br />
<strong>Not available in Internet Explorer <b>9</b> and older!</strong><br />

<!-- Img -->
<a name="CellImg"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;cell></b> <i>string[*]</i>
   <h4>Img</h4> <s></s>
</div>
   <i>
<b>Floating</b></i> images assigned to the cell. The images are not related to the cell value, their position is just fixed to the cell.<br />
The floating images are moved with the cell row and column. They are deleted if the cell row or column is deleted. They are <u>not</u> copied with the cell or row or column.<br />
First character separated array as <b>url</b>1,<b>parameters</b>1,<b>url</b>2,<b>parameters</b>2,....<br />
The <b>url</b> is usually data url containing the image data, but can be also standard reference to external image.<br />
The <b>parameters</b> are comma separated values as <b>x</b>,<b>y</b>,<b>width</b>,<b>height</b>,<b>rotate</b>,<b>opacity</b>,<b>name</b>,<b>cx</b>,<b>cy</b>,<b>cwidth</b>,<b>cheight</b>.<br />
<b>x</b>, <b>y</b> is position relative to the cell top left corner, in pixels. They can be relative to bottom right corner if start by "(", e.g. "(10,(20" or to center if start by "!", e.g. "!10,!20".<br />
<b>width</b>, <b>height</b> is final image size in pixels.<br />
<b>rotate</b> is image rotation clockwise in degrees.<br />
<b>opacity</b> is image opacity from 0 as fully transparent to 1 fully opaque.<br />
<b>name</b> is image name, shown as tooltip on mouse hover, need not be unique.<br />
<b>cx</b>, <b>cy</b> is left top corner inside image to crop the image from this position. If set, the <b>x</b> and <b>y</b> is position of the cropped top left corner.<br />
<b>cwidth</b>, <b>cheight</b> is width and height of the crop area in the image. The <b>width</b> and <b>height</b> is always size of the whole image.<br />
For example "|data:Image/png;base64,JsdfSDFDSFLKasdh....|0,0,100,50,90|Test.svg|10,10,50,40,0,0.4,test".<br />
The <b>Img</b> is also uploaded to server with cell and exported to xlsx.<br />

<!-- EditImg -->
<a name="CfgEditImg"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;Cfg></b> <i>string[]</i>
   <h4>EditImg</h4> <s>["Move,Shift,Resize,Rotate,Delete,Copy,Assign,Opacity,Float,Name"]</s>
</div>
If and how can be edited floating images defined by  <a href="#CellImg">Img</a> attribute. Comma separated list of case insensitive flags:<br />
<b>Move</b> - If set, <i><b>floating</b></i> images can be moved by mouse dragging.<br />
<b>Shift</b> - If set, <i><b>text</b></i> images can be moved inside cell by mouse dragging.<br />
<b>Resize</b> - If set, images can be resized by mouse dragging.<br />
<b>ResizeRatio</b> - If set instead of <b>Resize</b>, images can be resized by mouse dragging, but only actions preserving aspect ratio.<br />
<b>Rotate</b> - If set, images can be rotated by mouse dragging.<br />
<b>Delete</b> - If set, <b><i>floating</i></b> images can be deleted by <a href="#ActionsDeleteImage">DeleteImage</a> action. <b><i>Text</i></b> images can be deleted always.<br />
<b>Copy</b> - If set, images can be copied by <a href="#ActionsCopyImage">CopyImage</a> and <a href="#ActionsDuplicateImage">DuplicateImage</a> and action.<br />
<b>Crop</b> - If set, <b><i>floating</i></b> images can be cropped by mouse dragging.<br />
<b>Assign</b> - If set, automatically moves the <i><b>floating</b></i> image to another cell after moved, resized or rotated to be the cell always top left corner.<br />
<b>Opacity</b> - If set, permits changing image opacity by <a href="#ActionsEnterImageOpacity">EnterImageOpacity</a> action.<br />
<b>Float</b> - If set, permits changing image from floating to text and vice versa.<br />
<b>Name</b> - If set, permits changing image name by action <a href="#ActionsEnterImageName">EnterImageName</a>.<br />

<!-- AssignImg -->
<a name="CfgAssignImg"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;Cfg></b> <i>string[]</i>
   <h4>AssignImg</h4> <s>["Left,Top"]</s>
</div>
By which corner or center the <b><i>floating</i></b> images will be assigned to the cell, two keywords, case insensitive.<br />
<b>Left</b> or <b>Center</b> or <b>Right</b> - horizontal assignment.<br />
<b>Top</b> or <b>Middle</b> or <b>Bottom</b> - vertical assignment.<br />
The image is moved, copied and deleted with the assigned cell.<br />

<!-- DragImg -->
<a name="CfgDragImg"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;Cfg></b> <i>string[]</i>
   <h4>DragImg</h4> <s>[...]</s>
</div>
An action done when dragging text image edited in EHtml / Auto type cell and floating image in <a href="#CellImg">Img</a> attribute. Case insensitive.<br />
Can contain more actions comma separated, it is used the first one permitted by <a href="#CfgEditImg">EditImg</a>.<br />
The available actions:<br />
<b>Move</b> - move the <i><b>floating</b></i> image, <br />
<b>MoveXY</b> - move the <i><b>floating</b></i> image in one direction, <br />
<b>Copy</b> - copy the <i><b>floating</b></i> image and move it, <br />
<b>CopyXY</b> - copy the <i><b>floating</b></i> image and move it in one direction, <br />
<b>Shift</b> - move the <i><b>text</b></i> image inside cell, <br />
<b>Resize</b> - resize the image width and height, preserve aspect ratio,<br />
<b>ResizeXY</b> - resize the image width or height,<br />
<b>ResizeFree</b> - resize the image width and height, ignore aspect ratio,<br />
<b>Rotate</b> - rotate the image 0 - 360 degrees.<br /> 
<b>Crop</b> - crop the floating image from the nearest direction to the mouse cursor. <i>Text images cannot be cropped</i>.<br />
There are also attributes with suffix for every combination of control keys and mouse buttons in this order: 
<b>Shift</b>,<b>Ctrl</b>,<b>Alt</b>,<b>Meta</b>,<b>Left</b>,<b>Middle</b>,<b>Right</b>.
For example DragImgCtrlRight will be read if dragged by right mouse button and pressed Ctrl.<br />
Default values are: DragImg="Move,Shift,Resize,Rotate" DragImgCtrl="Copy,Shift" DragImgCtrlRight="Rotate" DragImgShift="Resize" DragImgShiftRight="Crop".<br />

<!-- DragImgMinWidth -->
<a name="CfgDragImgMinWidth"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;Cfg></b> <i>int</i>
   <h4>DragImgMinWidth</h4> <s>[5]</s>
</div>
Minimal width of image when resizing or cropping it.<br />

<!-- DragImgMinHeight -->
<a name="CfgDragImgMinHeight"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;Cfg></b> <i>int</i>
   <h4>DragImgMinHeight</h4> <s>[5]</s>
</div>
Minimal height of image when resizing or cropping it.<br />

<!-- TextImg -->
<a name="CfgTextImg"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;C> &lt;cell></b> <i>int</i>
   <h4>TextImg</h4> <s>[0]</s>
</div>
Controls text images in EHtml and Auto types, bit array.<br />
<b>1</b>. bit &amp;<b>1</b> - If set, images are restricted in the cell when editing.<br />
<b>2</b>. bit &amp;<b>2</b> - If set, only images are permitted in the cell when editing.<br />
<b>3</b>. bit &amp;<b>4</b> - If set, the high image can be cut, if not set, images control text height, higher images increase line height.<br />

<!-- DragImage -->
<a name="ActionsDragImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImage</h4> <s>Assigned to <b>OnDragImg</b> event, can be assigned only to On...DragImg events</s>
</div>
Moves, copies, resizes or rotates actual floating image under mouse cursor.<br />
The action is chosen according to the <a href="#CfgDragImg">DragImg</a> setting or by action chosen by <a href="#ActionsDragImageResize">DragImage...</a> action.<br />

<!-- MoveImage -->
<a name="ActionsMoveImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>MoveImage</h4> <s>Not assigned to any event, can be assigned only to On...DragImg events</s>
</div>
Moves actual floating image under mouse cursor.<br />

<!-- MoveXYImage -->
<a name="ActionsMoveXYImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>MoveXYImage</h4> <s>Not assigned to any event, can be assigned only to On...DragImg events</s>
</div>
Moves actual floating image under mouse cursor, only in one direction.<br />

<!-- CopyImage -->
<a name="ActionsCopyImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>CopyImage</h4> <s>Not assigned to any event, can be assigned only to On...DragImg events</s>
</div>
Copies and moves the copy of the actual floating image under mouse cursor.<br />

<!-- CopyXYImage -->
<a name="ActionsCopyXYImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>CopyXYImage</h4> <s>Not assigned to any event, can be assigned only to On...DragImg events</s>
</div>
Copies and moves the copy of the actual floating image under mouse cursor. Moves only in one direction.<br />

<!-- ResizeImage -->
<a name="ActionsResizeImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>ResizeImage</h4> <s>Not assigned to any event, can be assigned only to On...DragImg events</s>
</div>
Resizes actual floating image under mouse cursor. Preserves aspect ratio.<br />

<!-- ResizeImageXY -->
<a name="ActionsResizeXYImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>ResizeXYImage</h4> <s>Not assigned to any event, can be assigned only to On...DragImg events</s>
</div>
Resizes actual floating image under mouse cursor. Resize only width or height.
Does not preserve aspect ratio.<br />

<!-- ResizeFreeImage -->
<a name="ActionsResizeFreeImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>ResizeFreeImage</h4> <s>Not assigned to any event, can be assigned only to On...DragImg events</s>
</div>
Resizes actual floating image under mouse cursor. Does not preserve aspect ratio.<br />

<!-- RotateImage -->
<a name="ActionsRotateImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>RotateImage</h4> <s>Not assigned to any event, can be assigned only to On...DragImg events</s>
</div>
Rotates actual floating image under mouse cursor.<br />

<!-- CropImage -->
<a name="ActionsCropImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>CropImage</h4> <s>Not assigned to any event, can be assigned only to On...DragImg events</s>
</div>
Crops actual floating image from the nearest edge to the mouse cursor.<br />

<!-- DragImageResize -->
<a name="ActionsDragImageResize"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageResize</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of selected image in edited EHtml / Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to "Resize".<br />
If image is dragged without any control button, it is resized, preserves aspect ratio.

<!-- DragImageResizeXY -->
<a name="ActionsDragImageResizeXY"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageResizeXY</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of selected image in edited EHtml / Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to "ResizeXY".<br />
If image is dragged without any control button, it is resized in one direction.

<!-- DragImageResizeFree -->
<a name="ActionsDragImageResizeFree"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageResizeFree</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of selected image in edited EHtml / Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to "ResizeFree".<br />
If image is dragged without any control button, it is resized, ignores aspect ratio.

<!-- DragImageRotate -->
<a name="ActionsDragImageRotate"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageRotate</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of selected image in edited EHtml / Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to "Rotate".<br />
If image is dragged without any control button, it is rotated.

<!-- DragImageCrop -->
<a name="ActionsDragImageCrop"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageCrop</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of floating image in <a href="#CellImg">Img</a> attribute to "Crop".<br />
If image is dragged without any control button, it is cropped from the nearest edge to the mouse cursor.<br />
<i>Text images cannot be cropped</i>.<br />

<!-- DragImageMove -->
<a name="ActionsDragImageMove"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageMove</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of selected image in edited EHtml/Auto type cell to "Shift" and floating image in <a href="#CellImg">Img</a> attribute to "Move".<br />
If image is dragged without any control button, it is moved.

<!-- DragImageMoveXY -->
<a name="ActionsDragImageMoveXY"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageMove</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of selected image in edited EHtml/Auto type cell to "Shift" and floating image in <a href="#CellImg">Img</a> attribute to "MoveXY".<br />
If image is dragged without any control button, it is moved in one direction.

<!-- DragImageCopy -->
<a name="ActionsDragImageCopy"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageCopy</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of selected image in edited EHtml/Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to "Copy".<br />
If image is dragged without any control button, it is copied and moved.

<!-- DragImageCopyXY -->
<a name="ActionsDragImageCopyXY"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageCopyXY</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of selected image in edited EHtml/Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to "CopyXY".<br />
If image is dragged without any control button, it is copied and moved in one direction.

<!-- DragImageNone -->
<a name="ActionsDragImageNone"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageNone</h4> <s>Not assigned to any event</s>
</div>
Sets default dragging action of selected image in edited EHtml/Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to "".<br />
The image cannot be dragged without any control button.

<!-- DragImageClear -->
<a name="ActionsDragImageClear"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DragImageClear</h4> <s>Not assigned to any event</s>
</div>
Clears default dragging action of selected image in edited EHtml / Auto cell and floating image in <a href="#CellImg">Img</a> attribute.<br />
If image is dragged without any control button, its action is chosen by <a href="#CfgDragImg">DragImg</a> attribute.

<!-- RestoreImg -->
<a name="CfgRestoreImg"></a>
<div class="XML">
   <u>new <b>15.0</b></u> <b>&lt;Cfg></b> <i>string[]</i>
   <h4>RestoreImg</h4> <s>["Size,Rotation,Position"]</s>
</div>
Comma separated list of actions done when double clicked on image edited in EHtml / Auto type cell 
and by action <a href="#ActionsRestoreImage">RestoreImage</a>. Case insensitive.<br />
The available actions:<br />
<b>Size</b> - shows the image in its default width and height.<br />
<b>Rotation</b> - sets the image rotation to 0 degrees.<br />
<b>Position</b> - restores defaut position of <i><b>text</b></i> image.<br />
<b>Left</b> - moves <i><b>floating</b></i> image to the left edge of the cell.<br />
<b>Top</b> - moves <i><b>floating</b></i> image to the top edge of the cell.<br />
There are also attributes with suffix for every combination of control keys and mouse buttons in this order: 
<b>Shift</b>,<b>Ctrl</b>,<b>Alt</b>,<b>Meta</b>,<b>Left</b>,<b>Middle</b>,<b>Right</b>.
For example RestoreImgCtrlRight will be read if double clicked by right mouse button and pressed Ctrl.<br />

<!-- RestoreImage -->
<a name="ActionsRestoreImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>RestoreImage</h4> <s>Not assigned to any event</s>
</div>
Restores attributes set by <a href="#CfgRestoreImg">RestoreImg</a> of edited image in EHtml / Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to default settings.<br />

<!-- RestoreImageSize -->
<a name="ActionsRestoreImageSize"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>RestoreImageSize</h4> <s>Not assigned to any event</s>
</div>
Restores size of edited image in EHtml/Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to default settings. Removes the width and height attributes.<br />

<!-- RestoreImagePosition -->
<a name="ActionsRestoreImagePosition"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>RestoreImagePosition</h4> <s>Not assigned to any event</s>
</div>
Restores position of edited image in EHtml/Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to default settings. Places the image to the top left corner of the cell.<br />

<!-- RestoreImageRotation -->
<a name="ActionsRestoreImageRotation"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>RestoreImageRotation</h4> <s>Not assigned to any event</s>
</div>
Restores rotation of edited image in EHtml/Auto type cell and floating image in <a href="#CellImg">Img</a> attribute to default settings. Removes the rotate setting and the image is rotated to 0 degrees.<br />


<!-- OnAssignImage -->
<a name="OnAssignImage"></a>
<div class="API">
   <u>new <b>15.0</b></u> <b>API event</b> <i>bool</i>
   <h4>OnAssignImage</h4> <s>(<i>TGrid</i> <b>grid</b>, <i>TRow</i> <b>row</b>, <i>string</i> <b>col</b>, <i>TRow</i> <b>oldrow</b>, <i>string</i> <b>oldcol</b>, <i>type</i> <b>image</b>)</s>
</div>
Called before <b>image</b> is moved from cell [<b>oldrow</b>,<b>oldcol</b>] to cell [<b>row</b>,<b>col</b>] due <a href="#CfgInsertImg">InsertImg</a>["assign"] or action <a href="#ActionsAssignImage">AssignImage</a>.<br />
<b>image</b> is HTMLElement if changing edited text image or string as <a href="#CellImg">Img</a> attribute value if changing floating image.<br />

<!-- OnChangeImage -->
<a name="OnChangeImage"></a>
<div class="API">
   <u>new <b>15.0</b></u> <b>API event</b> <i>string</i>
   <h4>OnChangeImage</h4> <s>(<i>TGrid</i> <b>grid</b>, <i>TRow</i> <b>row</b>, <i>string</i> <b>col</b>, <i>string</i> <b>val</b>, <i>string</i> <b>old</b>)</s>
</div>
Called before <a href="#CellImg">Img</a> attribute is changed from <b>old</b> to <b>val</b> in given cell.<br />
Return new value to set to Img attribute or null to use actual val.<br />

<!-- AssignImage -->
<a name="ActionsAssignImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>AssignImage</h4> <s>Not assigned to any event</s>
</div>
Moves actual <b><i>floating</i></b> image to another cell after moved or rotated to be the cell always top left corner.<br />

<!-- DeleteImage -->
<a name="ActionsDeleteImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DeleteImage</h4> <s>Not assigned to any event</s>
</div>
Deletes actual <b><i>floating</i></b> image or edited <b><i>text</i></b> image.<br />

<!-- DuplicateImage -->
<a name="ActionsDuplicateImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>DuplicateImage</h4> <s>Not assigned to any event</s>
</div>
Creates a copy of actual <b><i>floating</i></b> image or edited <b><i>text</i></b> image and places it on the same place.<br />

<!-- EnterImageOpacity -->
<a name="ActionsEnterImageOpacity"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>EnterImageOpacity</h4> <s>Not assigned to any event</s>
</div>
Shows prompt dialog to enter an opacity of actual <b><i>floating</i></b> image or edited <b><i>text</i></b> image.<br />

<!-- EnterImageName -->
<a name="ActionsEnterImageName"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>EnterImageName</h4> <s>Not assigned to any event</s>
</div>
Shows prompt dialog to enter a name of actual <b><i>floating</i></b> image or edited <b><i>text</i></b> image.<br />

<!-- FloatImage -->
<a name="ActionsFloatImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>FloatImage</h4> <s>Not assigned to any event</s>
</div>
Creates floating image from edited <b><i>text</i></b> image. Removes the image from text, finishes editing and places it to the <a href="#CellImg">Img</a> attribute.<br />

<!-- TextImage -->
<a name="ActionsTextImage"></a>
<div class="ACT">
   <u>new <b>15.0</b></u> <b>&lt;Actions></b> <i></i>
   <h4>TextImage</h4> <s>Not assigned to any event</s>
</div>
Creates text image from actual <b><i>floating</i></b> image. Removes the image from the <a href="#CellImg">Img</a> attribute and places it to the end of the cell value as &lt;img> tag. Only if the cell is type of EHtml or Auto.<br />

<!-- DeleteImg -->
<a name="DeleteImg"></a>
<div class="API">
   <u>new <b>15.0</b></u> <b>API method</b> <i>bool</i>
   <h4>DeleteImg</h4> <s>(<i>TRow</i> <b>row</b>, <i>string</i> <b>col</b>, <i>int</i> <b>idx</b>, <i>bool</i> <b>refresh</b>, <i>bool</i> <b>undo</b>)</s>
</div>
Deletes one image in given cell on position <b>idx</b> in <a href="#CellImg">Img</a> attribute.<br />
If set <b>refresh</b>, it shows changes in grid. If set <b>undo</b>, the change is added to undo queue.<br />
Returns true for success, false for failure.

<!-- CopyImg -->
<a name="CopyImg"></a>
<div class="API">
   <u>new <b>15.0</b></u> <b>API method</b> <i>bool</i>
   <h4>CopyImg</h4> <s>(<i>TRow</i> <b>row</b>, <i>string</i> <b>col</b>, <i>int</i> <b>idx</b>, <i>bool</i> <b>refresh</b>, <i>bool</i> <b>undo</b>)</s>
</div>
Creates a copy of one image in given cell on position <b>idx</b> in <a href="#CellImg">Img</a> attribute. The copied image is put to the <b>idx</b>+1 position.<br />
If set <b>refresh</b>, it shows changes in grid. If set <b>undo</b>, the change is added to undo queue.<br />
Returns true for success, false for failure.

<!-- ChangeImg -->
<a name="ChangeImg"></a>
<div class="API">
   <u>new <b>15.0</b></u> <b>API method</b> <i>type</i>
   <h4>ChangeImg</h4> <s>(<i>TRow</i> <b>row</b>, <i>string</i> <b>col</b>, <i>int</i> <b>idx</b>, <i>float[]</i> <b>val</b>, <i>bool</i> <b>assign</b>, <i>bool</i> <b>refresh</b>, <i>bool</i> <b>undo</b>)</s>
</div>
Changes attributes of one image in given cell on position <b>idx</b> in <a href="#CellImg">Img</a> attribute. <br />
The <b>val</b> is an array of Img attributes:[<b>x</b>,<b>y</b>,<b>width</b>,<b>height</b>,<b>rotate</b>,<b>opacity</b>]. If the array value is null, it is not changed. <b>val</b> can be null to only assign the image.<br />
If set <b>assign</b>, the image can be moved to its top left cell. In this case returns the new cell as array as [row,col].<br />
If set <b>refresh</b>, it shows changes in grid. If set <b>undo</b>, the change is added to undo queue.<br />
Returns true for success, false for failure.


</div>
</body>
</html> 
